<template>
  <div class="footer-guide">
    <span class="guide-item" :class="{on: '/realtime' ===$route.path}" @click="goTo('/realtime')">
      <span class="item-icon">
       <img src="./../../assets/icons/实时1@2x.png" alt="" v-if="'/realtime' ===$route.path"/>
       <img src="./../../assets/icons/实时2@2x.png" alt="" v-else/>
      </span>
      <span>实时</span>
    </span>
    <span class="guide-item" :class="{on: '/count/income' ===$route.path || '/count/toll' === $route.path || '/count/servicearea' === $route.path}" @click="goTo('/count/income')">
       <span class="item-icon">
       <img src="./../../assets/icons/统计1@2x.png" alt="" v-if="'/count/income' ===$route.path"/>
       <img src="./../../assets/icons/统计1@2x.png" alt="" v-else-if="'/count/toll' ===$route.path"/>
       <img src="./../../assets/icons/统计1@2x.png" alt="" v-else-if="'/count/servicearea' ===$route.path"/>
       <img src="./../../assets/icons/统计2@2x.png" alt="" v-else/>
      </span>
      <span>统计</span>
    </span>
    <span class="guide-item" :class="{on: '/manage' ===$route.path}" @click="goTo('/manage')">
       <span class="item-icon">
         <img src="./../../assets/icons/管理1@2x.png" alt="" v-if="'/manage' ===$route.path" />
         <img src="./../../assets/icons/管理2@2x.png" alt="" v-else/>
      </span>
      <span>管理</span>
    </span>
    <span class="guide-item" :class="{on: '/profile' ===$route.path}" @click="goTo('/profile')">
       <span class="item-icon">
          <img src="./../../assets/icons/我的1@2x.png" alt="" v-if="'/profile' ===$route.path"/>
          <img src="./../../assets/icons/我的2@2x.png" alt="" v-else/>
      </span>
      <span>我的</span>
    </span>
  </div>
</template>

<script>
export default {
  name: 'FooterGuide',
  data () {
    return {}
  },
  created () {
  },
  methods: {
    goTo (path) {
      this.$router.replace(path)
    }
  }
}
</script>

<style scoped lang="less">
.footer-guide{
  display: flex;
  position: fixed;
  z-index: 1000;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  width: 100%;
  height: 55px;
  border-top: 1px solid #e5e5e5;
  .guide-item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: #aeaeae;
    .item-icon{
      img{
        margin-top: 4px;
        width: 22px;
        height: 22px;
      }
    }
    &.on{
      color: #3377fe;
    }
    span{
      margin-top: 4px;
      font-size: 14px;
    }
  }
}
</style>
